<template>
  <div class="shopping">
    <van-nav-bar
      title="购物车"
      right-text="按钮"
      @click-right="onClickRight"
    />
    <!-- 内容 -->
    <div class="main">
      <template v-if="cartList?.length===0">
        <van-empty description="您还没有添加宝贝！" />
      </template>
      <div class="shop" v-for="item in cartList" :key="item.id">
        <van-checkbox v-model="item.isChecked" @click="selectCart">选择</van-checkbox>
          <!-- 商品卡片 -->
          <van-swipe-cell>
            <van-card
              :price="item.s_good.price"
              :desc="item.s_good.desc"
              :title="item.s_good.name"
              :thumb="item.s_good.s_goods_photos[0].path"
            >
              <template #tags>
                <van-tag plain type="primary">3期免息</van-tag>
                <van-tag plain type="primary">近十五天最低</van-tag>
              </template>
              <template #footer>
                <!-- <van-button size="mini">按钮</van-button>
                <van-button size="mini">按钮</van-button> -->
                <van-tag plain type="primary">假一赔四</van-tag>
                <van-tag plain type="primary">极速退款</van-tag>
                <van-stepper v-model="item.num" :name="item.id" :max="item.s_good.stock_num" @change="countChange" />

              </template>
            </van-card>
              <template #right>
                <van-button square text="删除" @click="delCart(item.id)" type="danger" class="delete-button" />
              </template>
        </van-swipe-cell>
      </div>
    </div>
    <!-- 底部 -->
    <van-submit-bar :price="totalPrice*100" button-text="去结算" @submit="onSubmit">
      <van-checkbox v-model="checkedAll" @click="checkedAllHandler">全选共{{totalNum }}件商品</van-checkbox>
      <template #tip>
        你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
      </template>
    </van-submit-bar>
    <!-- 提示 -->
    <van-toast v-model:show="show" style="padding: 3vw">
      <template #message>
        <h1>您还没有选择宝贝!</h1>
      </template>
    </van-toast>
  </div>
</template>

<script setup>
import { showToast } from 'vant';
import { ref,computed } from 'vue';
import { useRouter } from 'vue-router';
import useCartStore from '@/stores/cart';
import { storeToRefs } from 'pinia';
const cartStore=useCartStore()
const router=useRouter()

const onClickLink = () => showToast('修改地址');
// 按钮函数
const onClickRight = () => showToast('按钮')
// 全选框
const checkedAll=ref(false)
// 商品总数
const totalNum=ref(0)
// 商品总价
const totalPrice=ref(0)
// 获取购物车数据
cartStore.getCart()
const {cartList}=storeToRefs(cartStore)
// 修改购物车数量
const countChange=(num,name)=>{
  cartStore.updateCart(name.name,{num})
}
// 展示提示
const show=ref(false)
// 删除购物车商品
const delCart=(id)=>{
  cartStore.delCart(id)
}
// 选中商品
const selectCart=()=>{
  checkedAll.value=cartList.value.every(ele=>ele.isChecked)
  let count=ref(0)
  let money=ref(0)
  cartList.value.forEach(ele=>{
    if(ele.isChecked){
      count.value+=1
      money.value+=ele.num*ele.s_good.price
    }
  })
  totalNum.value=count.value
  totalPrice.value=money.value
}
// 全选
const checkedAllHandler=()=>{
  cartList.value.forEach(ele => {
    ele.isChecked=checkedAll.value
  });
  // 总数 总价
  if(checkedAll.value){
    totalNum.value=cartList.value.length
    totalPrice.value=cartList.value.reduce((prev,item)=>{
      return prev+=item.num*item.s_good.price
    },0)
  }else{
    totalNum.value=0
    totalPrice.value=0
  }
}
// 去结算
const onSubmit = () =>{
  let data=ref([])
  cartList.value.forEach(ele=>{
    if(ele.isChecked){
      data.value.push(ele)
    }
  })
  if(data.value.length){
    router.push({path:'/Order',query:{data:JSON.stringify(data.value)}})
  }else{
    show.value=true
  }
}
</script>

<style lang='scss'>
.shopping{
  width: 100vw;
  // height: 266.6667vw;
  background-color: gainsboro;
  .main{
    padding-top: 2.6667vw;
    min-height: 80vh;
    width: 100vw;
    // height: 300vw;
    box-sizing: border-box;
    background-color: gainsboro;
    .shop{
      padding-top: 2.6667vw;
      margin: 0 auto 2.6667vw;
      width: 96vw;
      height: 48.3333vw;
      border-radius: 2.6667vw;
      box-sizing: border-box;
      background-color: white;
      .van-checkbox{
        margin-left: 2.6667vw;
      }
      .delete-button {
        height: 100%;
      }
    }
  }
  .van-submit-bar{
    bottom: 13.3333vw;
  }
}
</style>
